<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card>
            <!-- 警告区域 -->
            <el-alert title="添加商品信息" type="info" :closable='false' center show-icon></el-alert>
            <!-- 步骤条区域 -->
            <!-- activeIndex 转为数字型 -->
            <el-steps :active="activeIndex - 0" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <!-- tab栏区域 -->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" label-position='top'>
                <el-tabs v-model='activeIndex' :tab-position="'left'" :before-leave='tabLeave' @tab-click='tabClick'>
                    <el-tab-pane label="基本信息" name='0'>
                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="addForm.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格" prop="goods_price">
                            <el-input v-model="addForm.goods_price" type='number'></el-input>
                        </el-form-item>
                        <el-form-item label="商品重量" prop="goods_weight">
                            <el-input v-model="addForm.goods_weight" type='number'></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量" prop="goods_number">
                            <el-input v-model="addForm.goods_number" type='number'></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类" prop='goods_cat'>
                            <el-cascader v-model="addForm.goods_cat" :options="cateList" :props="props"
                                @change="handleChange" clearable>
                            </el-cascader>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品参数" name='1'>
                        <el-form-item :label='item.attr_name' v-for='item in manyCate' :key='item.attr_id'>
                            <el-checkbox-group v-model="item.attr_vals">
                                <el-checkbox :label="value" v-for='(value,index) in item.attr_vals' :key='index' border>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品属性" name='2'>
                        <el-form-item :label='item.attr_name' v-for='item in onlyCate' :key='item.attr_id'>
                            <el-input v-model="item.attr_vals"></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品图片" name='3'>
                        <el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove"
                            list-type="picture" :headers='headers' :on-success='handleSuccess'>
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="商品内容" name='4'>
                        <!-- 富文本编辑器组件 -->
                        <quill-editor v-model="addForm.goods_introduce"></quill-editor>
                        <el-button type="primary" class="btnAdd" @click='add'>添加商品</el-button>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </el-card>
        <!-- 预览图片 -->
        <el-dialog title="预览图片" :visible.sync="previewVisible" width="50%">
            <img :src="previewPath" alt="" style='width:100%;'>
        </el-dialog>
    </div>
</template>

<script>
    // 导入lodash 组件，使用cloneDeep() 方法进行深拷贝
    import _ from 'lodash';
    export default {
        data() {
            return {
                // 步骤条和tab栏对应的索引
                activeIndex: '0',
                // 添加商品表单数据对象
                addForm: {
                    goods_name: '',
                    goods_price: 0,
                    goods_weight: 0,
                    goods_number: 0,
                    // 商品所属的分类数组
                    goods_cat: [],
                    // 上传图片的临时路径
                    pics: [],
                    // 商品的介绍
                    goods_introduce: '',
                    // 商品的参数（数组），包含 动态参数 和 静态属性
                    attrs: []
                },
                addFormRules: {
                    goods_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
                    goods_price: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
                    goods_weight: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
                    goods_number: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
                    goods_cat: [{ required: true, message: '请选择商品分类', trigger: 'blur' }]
                },
                // 商品分类数据
                cateList: [],
                // 级联选择器配置项
                props: {
                    expandTrigger: 'hover',
                    value: 'cat_id',
                    label: 'cat_name',
                    children: 'children'
                },
                // 商品分类参数
                manyCate: [],
                // 商品属性
                onlyCate: [],
                // 图片上传的后台服务器地址
                uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
                // 图片上传组件的请求头
                headers: {
                    Authorization: sessionStorage.getItem('token')
                },
                // 预览图片的完整路径
                previewPath: '',
                // 预览图片弹框是否显示
                previewVisible: false
            }
        },
        created() {
            this.getCateList()
        },
        methods: {
            async getCateList() {
                const { data: res } = await this.$axios.get('categories');
                if (res.meta.status !== 200) return this.$message.error('获取商品分类数据失败!');
                this.cateList = res.data;
            },
            // 级联选择器选中项发生变化会触发这个函数
            handleChange() {
                // 只能选择第三级
                if (this.addForm.goods_cat.length !== 3) {
                    return this.addForm.goods_cat = []
                }
            },
            // 标签页发生切换触发函数
            // activeName 即将进入的标签页name
            // oldActiveName 即将离开的标签页name
            tabLeave(activeName, oldActiveName) {
                // 判断是否选择商品分类，没选择就不允许切换
                if (oldActiveName === '0' && this.addForm.goods_cat.length !== 3) {
                    this.$message.error('请先选择商品分类!');
                    return false;
                }
            },
            // tab标签页 被选中时触发
            async tabClick() {
                // 证明访问的是商品参数面板
                if (this.activeIndex === '1') {
                    // 发起请求获取商品分类参数
                    const { data: res } = await this.$axios.get(`categories/${ this.cateId }/attributes`, {
                        params: { sel: 'many' }
                    });
                    if (res.meta.status !== 200) return this.$message.error('获取商品参数失败!');

                    res.data.forEach(item => {
                        item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ');
                    })

                    this.manyCate = res.data;
                    // console.log(res.data);
                };
                // 证明访问的是商品属性面板
                if (this.activeIndex === '2') {
                    // 发起请求获取商品属性
                    const { data: res } = await this.$axios.get(`categories/${ this.cateId }/attributes`, {
                        params: { sel: 'only' }
                    });
                    if (res.meta.status !== 200) return this.$message.error('获取商品参数失败!');

                    this.onlyCate = res.data;
                    // console.log(res.data);
                }
            },
            // 图片预览
            handlePreview(file) {
                // 获取图片的完整路径
                this.previewPath = file.response.data.url;
                this.previewVisible = true;
            },
            // 图片移除
            handleRemove(file) {
                // console.log(file);

                // 获取图片的临时路径
                const path = file.response.data.tmp_path;
                // 从pics数组找出路径对应的索引
                const index = this.addForm.pics.findIndex(item => {
                    return item.pic === path;
                })
                // 删除数组对应的数据
                this.addForm.pics.splice(index, 1);
                // console.log(this.addForm);
            },
            // 图片上传成功
            handleSuccess(response) {
                this.addForm.pics.push({ 'pic': response.data.tmp_path })
                // console.log(this.addForm);
            },
            // 添加商品
            add() {
                // 预验证
                this.$refs.addFormRef.validate(async valid => {
                    if (!valid) return this.$message.error('请填写必要的数据!');
                    // 因为请求的参数 goods_cat 必须是一个字符串，但是级联选择器绑定的 goods_cat 必须是一个数组
                    // 所以不能在发送请求前直接把 goods_cat 转为字符串 
                    // 可以利用 lodash组件的cloneDeep 方法进行深拷贝
                    const formDeep = _.cloneDeep(this.addForm);
                    formDeep.goods_cat = formDeep.goods_cat.join(',');
                    // 处理动态参数
                    this.manyCate.forEach(item => {
                        const newInfo = {
                            'attr_id': item.attr_id,
                            'attr_value': item.attr_vals.join(' ')
                        }
                        this.addForm.attrs.push(newInfo);
                    })
                    // 处理静态参数
                    this.onlyCate.forEach(item => {
                        const newInfo = {
                            'attr_id': item.attr_id,
                            'attr_value': item.attr_vals
                        }
                        this.addForm.attrs.push(newInfo);
                    })
                    formDeep.attrs = this.addForm.attrs;

                    // console.log(formDeep);
                    // 发起添加商品请求
                    const { data: res } = await this.$axios.post('goods', formDeep);
                    if (res.meta.status !== 201) return this.$message.error('添加失败!');
                    this.$message.success('添加成功!');

                    // 跳转回商品列表页
                    this.$router.push('/goods');
                })
            }
        },
        computed: {
            // 获取商品的分类id
            cateId() {
                if (this.addForm.goods_cat.length === 3) {
                    return this.addForm.goods_cat[2];
                };
                return null;
            }
        }
    }
</script>

<style scoped>
    .el-tag {
        margin: 5px;
    }

    .el-checkbox {
        margin: 0 5px 0 0 !important;
    }

    .btnAdd {
        margin-top: 15px;
    }
</style>